<template>
  <div id="components-layout-demo-basic">
    <a-layout>
      <a-layout-header></a-layout-header>
      <a-layout-content>
        <a-form-model
          id="frmResultQuery"
          :layout="'inline'"
          :model="queryModel"
          ref="frmResultQuery"
          style="margin: 25px 15px"
          :rules="rules"
        >
          <a-form-model-item label="赛事名称" prop="matchId" v-if="showMatchList" required>
            <a-select
              show-search
              placeholder="请输入或选择赛事名称"
              style="width: 200px"
              :filter-option="filterOption"
              :options="matchList"
              :field-names="{ label: 'label', value: 'id' }"
              v-model="queryModel.matchId"
              @select="onMatchSelect"
            >
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item label="组别" prop="groupId">
            <a-select
              show-search
              placeholder="请输入或选择组别"
              style="width: 200px"
              :filter-option="filterOption"
              :options="groupList"
              :field-names="{ label: 'label', value: 'value' }"
              :defaultValue="''"
              v-model="queryModel.groupId"
            >
            </a-select>
          </a-form-model-item> -->
          <a-form-model-item label="参赛号码" prop="rid" required>
            <a-input ref="rid" placeholder="请输入您的参赛号码" v-model="queryModel.rid" />
          </a-form-model-item>

          <a-form-model-item>
            <a-button type="primary" @click="onSubmit"><a-icon type="search" />查询</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-layout-content>
      <a-layout-footer></a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import store from '@/store/'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'QueryResult',
  data() {
    return {
      matchId:"",
      matchList: [],
      groupList: [],
      showMatchList: true,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      queryModel: { rid: '', matchId: '', groupId: '' },
      rules: {
        rid: [{ required: true, message: '请输入参赛号码', trigger: 'blur' }],
        matchId: [{ required: true, message: '请选择赛事', trigger: 'blur' }],
      },
    }
  },
  created() {
    let that = this;
    this.matchId = this.$route.params.code;
    this.$http.get('/matchplayer/list?matchId=' + this.matchId).then((res) => {
      if(res.result.length >0){
        that.showMatchList = false;
        that.queryModel.matchId = that.matchId;
      }
    });
  },
  mounted() {
    let that = this;
   
    this.$http.get('/matchwhite/matchinfo').then((res) => {
      if (res.code == 200 && res.success) {
        that.matchList = res.result.match.map((o) => {
          return { label: o.mname, value: o.id }
        })
        that.groupList_origin = res.result.info
      }
    })
  },
  methods: {
    onSubmit() {
      this.$refs.frmResultQuery.validate((valid) => {
        if (valid) {
          var url = window._CONFIG['domianURL'] + 'jmreport/view/760854393738547200'
          url += '?matchId=' + this.matchId
          url += '&playerId=' + this.$refs.frmResultQuery.model.rid
          window.open(url)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    onMatchSelect(value) {
      this.groupList = []
      this.$refs.frmResultQuery.model.groupId = ''
      let that = this
      this.groupList_origin.forEach((item) => {
        if (item.length > 0) {
          if (item[0].matchid === value) {
            that.groupList = item.map((o) => {
              return { label: o.mgroup, value: o.id }
            })
          }
        }
      })
    },
  },
}
</script>

<style scoped>
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: transparent;
  color: #fff;
}
#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-content {
  /* background: rgba(16, 142, 233, 1); */
  color: #fff;
  min-height: 120px;
  line-height: 120px;
  margin: 20px;
}
#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}
#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}

.btn_inline {
  display: inline;
}
.switchQuery {
  display: inline-block;
  vertical-align: bottom;
  padding: 10px;
  margin-right: 10px;
}
</style>